import React from 'react';

import {
  ActionType,
  FooterToolbar,
  PageContainer,
  ProDescriptions,
  ProDescriptionsItemProps,
  ProTable,
  ProColumns,
  ProLayout,
} from '@ant-design/pro-components';

import { CommonApi, UserApi } from '@/services/admin';

const UserList: React.FC = () => {
  const columns: ProColumns<API.UserInf>[] = [
    {
      title: '用户名',
      dataIndex: 'username',
      tip: '用户名是唯一的 key',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '用户名为必填项',
          },
        ],
      },
    },
    {
      title: '手机号',
      dataIndex: 'mobile',
      valueType: 'text',
    },
    {
      title: '出生日期',
      dataIndex: 'birthday',
      valueType: 'dateTime',
    },
    {
      title: '性别',
      dataIndex: 'sex',
      valueEnum: {
        SECRET: { text: '保密' },
        MALE: { text: '男' },
        FEMALE: { text: '女' },
      },
    },
    {
      title: '电子邮箱',
      dataIndex: 'email',
      valueType: 'text',
    },
  ];

  
  return (
    <PageContainer>
      <ProTable<API.UserInf>
          rowKey="id"
          request={async (params, sorter, filter) => {
            //console.log("params:", sorter, filter);
            const { data, success } = await UserApi.listUser({
              //...params,
              // FIXME: remove @ts-ignore
              // @ts-ignore
              sorter,
              filter,
            });

            return {
              data: data.data,
              total: data.total,
              success,
            };
          }}
          columns={columns}
        ></ProTable>
    </PageContainer>
  );
};

export default UserList;
